<template>
    <fieldset>
        <div class="container">
        <div class="heading">
            <div class="img">
                <img src="http://chst.vip:8081/todolist/static/media/logo.dc230d7c3cb96c91409eaedab952337e.svg
" alt="" height="80">
            </div>
            <div class="title">
                T0-D0 List
            </div>
        </div> 
        <div class="filed">
            <h1 class="text">~开始努力写代码了~</h1>
            <div class="form">
                <div class="input">
                    <input type="text" placeholder="添加要做的事儿..." ref="input">
                </div>
                <button class="submit-btn">
                    <span @click="add">提交</span>
                </button>
            </div>
        </div>
        <ul>
            <li v-for="(item,index) in arr" :key="item">
               <input type="checkbox"> 
               {{item}}
                <b @click="del(index)">x</b>
            </li>
        </ul>
        <div class="options">
            <button>全部</button>
            <span style="color:red; margin-right:5px; font-size=18px;">0</span>
            <span>条事项</span> 
            <button>
                已完成
                <span style="color:red; margin-right:5px; font-size=18px;">0</span>
            </button>
            <button>
                未完成
                <span style="color:red; margin-right:5px; font-size=18px;">0</span>
            </button>
        </div>
    </div>
    </fieldset>
    
</template>


<script setup> 
import {ref,onMounted} from "vue"
let arr=ref(['1','2','3'])

let input = ref()
onMounted(()=>{
    console.log(input.value)
})
// 设置添加事件
let add =function(){
    console.log(input.value.value)
    arr.value.push(input.value.value)
}
// 设置删除事件
let del =function(index){
    console.log(index)
    arr.value.splice(index,1)
}

</script>


<style scoped>
ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
fieldset{
    align-items: center;
    background-image: linear-gradient(90deg,#affff3,#18aca5);
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 50px 0;
}
.container{
   background: #f2f2f2;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
    padding: 30px 40px 20px;
    text-align: center;
    width: 440px;

}
.heading{
    align-items: center;
    display: flex;
    justify-content: center;
}
.title{
    background: #ed0e7a5e;
    border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
    color: #fff;
    font-size: 21px;
    padding: 0.25em 0.8em 0.15em;
}
.text{
    color: #00bfff;
    font-size: 22px;
    margin-bottom: 18px;
}
.form{
    display: flex;
    justify-content: center;
}
.input{
    display: inline-block;
    flex-grow: .65;
    margin-right: 15px;
}
.form input{
    background: transparent;
    border: 0;
    border-bottom: 3px dashed #00bfff;
    font-size: 18px;
    outline: 0;
    padding: 5px 0 3px;
    width: 100%;
}
.submit-btn {
    outline: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    transform: rotate(4deg);
    border-radius: 6px;
    transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
}

    .submit-btn span {
        position: relative;
        display: block;
        font-size: 16.5px;
        padding: 0.34em 0.84em;
        border: 2px solid #494a4b;
        border-radius: inherit;
        background-color: #fff;
    }

    .submit-btn:before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        width: 100%;
        height: 100%;
        transform: scaleY(1.1);
        border: 1px solid #494a4b;
        border-radius: inherit;
        transform-origin: top;
        background-color: #fe7345;
        transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
    }

.options button{
    background: transparent;
    border: 1px double #00bfff;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    font-weight: bolder;
    margin: 10px;
    outline: 0;
}
.filed{
    margin-bottom: 20px;
}
b{
    float: right;
    cursor:pointer
}
</style>